<template>
    <div class="timer-container">
        <div class="timer-display">
            <span class="time">{{ formattedTime }}</span>
        </div>
        <div class="timer-controls">
            <button 
                @click="toggleTimer" 
                :class="{ 'start': !isRunning, 'pause': isRunning }"
            >
                {{ isRunning ? '暂停' : '开始' }}
            </button>
            <button @click="resetTimer" class="reset">
                重置
            </button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onBeforeUnmount } from '@vue/composition-api';

const time = ref(0); // 时间，以秒为单位
const isRunning = ref(false);
let timerInterval: number | null = null;

const formattedTime = computed(() => {
    const hours = Math.floor(time.value / 3600);
    const minutes = Math.floor((time.value % 3600) / 60);
    const seconds = time.value % 60;
    
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
});

const startTimer = () => {
    if (!isRunning.value) {
        isRunning.value = true;
        timerInterval = window.setInterval(() => {
            time.value++;
        }, 1000);
    }
};

const pauseTimer = () => {
    if (isRunning.value) {
        isRunning.value = false;
        if (timerInterval) {
            clearInterval(timerInterval);
            timerInterval = null;
        }
    }
};

const toggleTimer = () => {
    if (isRunning.value) {
        pauseTimer();
    } else {
        startTimer();
    }
};

const resetTimer = () => {
    pauseTimer();
    time.value = 0;
};

// 组件销毁前清理定时器
onBeforeUnmount(() => {
    if (timerInterval) {
        clearInterval(timerInterval);
    }
});
</script>

<style lang="less" scoped>
.timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timer-display {
    font-size: 48px;
    font-weight: bold;
    font-family: monospace;
    color: #333;
    margin-bottom: 20px;
}

.timer-controls {
    display: flex;
    gap: 10px;

    button {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;

        &.start {
            background-color: #4CAF50;
            color: white;

            &:hover {
                background-color: #45a049;
            }
        }

        &.pause {
            background-color: #ff9800;
            color: white;

            &:hover {
                background-color: #f57c00;
            }
        }

        &.reset {
            background-color: #f44336;
            color: white;

            &:hover {
                background-color: #d32f2f;
            }
        }
    }
}
</style> 